import { BasicColumn } from '/@/components/Table';
import { h } from 'vue';
import { Select, Input, Checkbox } from 'ant-design-vue';
const InputTextArea = Input.TextArea;
export const columns: BasicColumn[] = [
  {
    title: '安全配置信息',
    dataIndex: 'desc',
    key: 'desc',
    colSpan: 3,
  },
  {
    title: '值',
    dataIndex: 'value',
    key: 'value',
    colSpan: 0,
    width: 300,
    ellipsis: true,
    customRender: ({ record }) => {
      if (record['type'] === 'checkebox') {
        return h(
          'div',
          {
            style: 'text-align:left',
          },
          h(Checkbox, {
            checked: record['value'],
            onChange: (e) => {
              record['value'] = e.target.checked;
            },
          }),
        );
      } else if (record['type'] === 'select') {
        return h(Select, {
          options: record['options'],
          style: 'width:100%',
          value: record['value'],
          fieldNames: { value: 'value', label: 'name' },
          getPopupContainer: () => document.body,
          onChange(value) {
            record['value'] = value;
          },
        });
      } else if (record['type'] === 'boolean') {
        return h(Select, {
          value: record['value'],
          options: [
            {
              label: '是',
              value: 'true',
            },
            {
              label: '否',
              value: 'false',
            },
          ],
          style: 'width:100%',
          onChange: (value) => {
            record['value'] = value;
          },
        });
      } else if (record['type'] === 'textarea') {
        return h(InputTextArea, {
          value: record['value'],
          onChange: (e) => {
            record['value'] = e.target.value;
          },
        });
      } else {
        return h(Input, {
          value: record['value'],
          onChange: (e) => {
            record['value'] = e.target.value;
          },
        });
      }
    },
  },
];
